<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .list {
            width: 600px;
            display: flex;
            margin: 50px auto;
            text-align: center;
            line-height: 40px;
        }

        .list li {
            flex: 1;
            border: 1px solid #333;
        }
    </style>
</head>

<body>
    <ul class="list">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
    </ul>
</body>
<script>
    // 闭包的应用_多元素绑定事件

    // 多元素绑定事件
    var liList = document.querySelectorAll(".list li");

    // 有问题
    // for (var i = 0; i < liList.length; i++) {
    //     var li = liList[i];
    //     li.onclick = function () {
    //         console.log(li, i);
    //     }
    // }


    /* for (var i = 0; i < liList.length; i++) {
        function fn(i) {
            var li = liList[i];

            // 给元素绑定事件 => 对元素的onclick属性赋值 -> 事件的函数一直存储在li上
            li.onclick = function () {
                console.log(li, i);
            }
        }
        fn(i);// fn(0).....fn(6)
    } */

    for (var i = 0; i < liList.length; i++) {
        (function (i) {
            var li = liList[i];

            // 给元素绑定事件 => 对元素的onclick属性赋值 -> 事件的函数一直存储在li上
            li.onclick = function () {
                console.log(li, i);
            }
        })(i);// fn(0).....fn(6)
    }


    Array.from(liList).forEach(function (li, i) {
        li.onclick = function () {
            console.log(li, i);
        }
    })


</script>

</html>